<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body> 
<!--
 vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。
created 与 mounted 的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

computed 与 watched 的区别
computed 是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。
watched 属性是手动定义的所需监听的值，
最初绑定值的时候也执行函数，则就需要用到immediate属性
-->


		<div id="box">
			{{cityName}}
			<input v-model="cityName"/>
		</div>
			<script type="text/javascript">
				new Vue({
					el:"#box",
					data:{
						 cityName: 'shanghai',
					},

					watch:{
					cityName(newName, oldName) { 
						 alert(newName+'---'+oldName);
					},
					immediate: true,
					
					}
					
				})
		</script>
	</body>